<template>
  <div class="address-page flex-col">
    <navbar :back="isBack" title="收货地址" @goBack="goBack"/>

    <scroll-view class="address-container flex-1" scroll-y>
      <block v-for="item in addressList" :key="item.id">
        <div class="clear-10"></div>
        <div class="address-card-item flex-row" @click="selectAddress(item)">
          <div class="left">
            <div class="name">{{ item.name }}</div>
            <div class="default" v-if="item.is_default">
              <span>默认</span>
            </div>
          </div>
          <div class="middle flex-1">
            <div class="phone">{{ item.phone }}</div>
            <div class="address">{{ item.province }} {{ item.city }} {{ item.county }} {{ item.address }}</div>
          </div>
          <div class="right">
            <div class="edit" @click="goToSaveAddressPage(item)">编辑</div>
          </div>
        </div>
      </block>
    </scroll-view>

    <div class="action-holder flex-center">
      <div class="action-box" @click="goToCreateAddressPage">
        <img src="/static/assets/img/icon/icon-create.png"/>
      </div>
    </div>
  </div>
</template>

<script>
  import global from 'global'
  import navbar from '@/components/navbar'
  import Core from 'core'
  import Common from 'common'

  export default {
    components: {
      navbar
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        navBarHeight: global.state.statusH + global.state.titleH,
        isBack: true,

        addressList: []
      }
    },

    onShow () {
      this._getAddressList()
  },

    methods: {
      goBack () {
        Core.Util.goBack()
      },

      selectAddress (item) {
        Core.Event.emit('select_address', item)
        Core.Util.goBack()
      },

      goToCreateAddressPage () {
        Common.go('/pages/收货地址/创建/main?id=0')
      },

      goToSaveAddressPage (item) {
        Common.go('/pages/收货地址/创建/main?id=' + item.id)
      },

      _getAddressList () {
        Core.Api.UserAddress.addressList()
          .then(res => {
            this.addressList = res.user_address_list
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .address-page {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .address-container {
      height: 100%;
      overflow-y: auto;
    }

    .address-card-item {
      background: #FFFFFF;
      padding: 16px 12px;
      .left {
        .name {
          font-size: 18px;
          color: rgb(65, 65, 65);
        }
        .default {
          span {
            background: rgb(251, 62 ,8);
            color: #FFFFFF;
            padding: 2px 4px;
          }
        }
      }

      .middle {
        padding: 0 4px;
        color: rgb(171, 171, 171);
        .phone {
          margin-top: 2px;
          margin-bottom: 4px;
        }
        .address {
          line-height: 18px;
          font-size: 16px;
        }
      }

      .right {
        color: rgb(171, 171, 171);
      }
    }

    .action-holder {
      height: 90px;
      .action-box {
        width: 60px;
        height: 60px;
        img {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
</style>
